<template>
  <div class="msgIndex" @touchmove="mousemove()" @touchend="mouseend()">
    <!-- <ComHeader title="消息中心"  ref="header" /> -->
    <p style="z-index:100" class="hred-p">
      <mt-button :type="t1" size="small"  @click="detail = 4;t1 = 'primary'; t2 = 'default' " class="btn">订单消息</mt-button><mt-button :type="t2" size="small"  @click="detail = 5;t2 = 'primary'; t1 = 'default'" class="btn">官方消息</mt-button>
    </p>
    <List :data="detail"  :max-height="maxHeight" v-if="maxHeight"></List>
    <ComFooter/>
  </div>
</template>
<script>
import Vue from 'vue'
import api from "@/fetch/api"
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
import ComHeader from '@/common/ComHeader' 
import ComFooter from '@/common/ComFooter'
import List from './List'
import { Cell, Badge ,Navbar, TabItem,Button} from 'mint-ui';
  export default {
    data(){
      return {
        items: [],
        selected:"1",
        detail:4,
        myData:"",
        t1:'primary',
        t2:'default',
        arr:[],
        // myData: [{
        //   name: '官方消息',
        //   id: 5,
        //   total: 0
        // },{
        //   name: '订单消息',
        //   id: 4,
        //   total: 0
        // },{
        //   name: '客服消息',
        //   id: 3,
        //   total: 0
        // }],
        data: null,
        MsgList: null,
        maxHeight: 0,
      }
    },
    mounted () {
      console.log(this.$refs.nav)
      console.log(7777)
      this.maxHeight = 30
     
      console.log(this.maxHeight)
    },

    components: {
      Cell,
      Badge,
      ComHeader,
      ComFooter,
      Navbar, TabItem,List,Button
    },
    created() {
      const params = {
        username: this.getUserId(),
        type: '2'
      };
      document.title = '我的分类'
      api.getMsgList(params)
        .catch(res => {
          this.print(res);
          var a = 1, b =1, c = 1;
          for (var i = 0; i < res.data.length; i++) {
            var item = res.data[i];
            if(item.msgtype == '官方' && item.hasread == '未读'){
              console.log(i)
              this.myData[0].total = a++;
            }else if(item.msgtype == '订单' && item.hasread == '未读') {
              this.myData[1].total = b++;
            }else if (item.msgtype == '客服' && item.hasread == '未读') {
              this.myData[2].total = c++;
            }
          };
          this.MsgList = res.data;
        })
    },
    methods: {
      mousemove(e){
        var e = e ||window.event
        var endX = e.touches[0].clientX;
        this.arr.push(endX)
      },
      mouseend(){
        if(this.arr[0]-this.arr[this.arr.length-1]>150){
          this.$router.push({
            path: "/my"
          }) 
        }else if(this.arr[0]-this.arr[this.arr.length-1]<-150){
          this.$router.push({
            path: "/classify"
          }) 
        }
        this.arr=[]
      },

      refresh: function (done) {
        var self = this
        setTimeout(function () {
          var start = self.top - 1
          for (var i = start; i > start - 10; i--) {
            self.items.splice(0, 0, i + ' - keep walking, be 2 with you.');
          }
          self.top = self.top - 10;
          done();
        }, 1500)
      },
    }
  }
</script>
<style lang="stylus" scoped>
  .msgIndex,.scrollers{
    position: relative;
    height: 100%;
    display: flex;
    overflow hidden;
    flex-direction:column; 
  }
  .hred-p{
    position fixed;
    left 0;
    right 0;
  }
  .mint-button--primary {
    background-color:#3A96FF;
  }
  
</style>
<style lang="stylus">
  html,body, #app{
    height: 100%;
  }
  .mtcell:nth-last-child(1){border-bottom: 1px solid #fff;}
  .btn{width: 50%;margin: 0;padding: 0;border-radius:0}
</style>